<template>
  <el-container>
    <menu-aside ref="menuAsideRef" @node-click="handleNodeClick" @add-click="handleAddClick"
                @delete-click="handleDeleteClick" v-power="'system:menu:lists'"></menu-aside>
    <el-container>
      <el-main ref="main" class="no-padding" style="padding: 20px;">
        <el-row class="row_height" :gutter="40" v-if="!asideMenu">
          <el-col>
            <el-empty style="margin-top: 250px;" :image-size="100" description="请单击左侧菜单后操作"></el-empty>
          </el-col>
        </el-row>
        <el-row class="row_height" :gutter="40" v-else>
          <el-col :lg="12">
            <h2>{{ asideMenu.name || "新增菜单" }}</h2>
            <menu-form ref="menuFormRef" :form="asideMenu" :menu-list="menuList"></menu-form>
          </el-col>
          <el-col :lg="12" class="apiList">
            <h2>接口权限</h2>
            <menu-auth v-model:sys-power-vo-list="asideMenu.sysPowerVoList"
                       v-power="'system:power:lists'"></menu-auth>
          </el-col>
        </el-row>
      </el-main>
      <el-footer v-if="asideMenu">
        <div class="jcx-table-page">
          <div class="jcx-table-do">
            <el-button :loading="saving" :type="asideMenu.id ? 'warning' : 'primary'" plain @click="handleSubmit"
                       v-powers="asideMenu.id ? ['system:menu:edit'] : ['system:menu:add']">
              {{ asideMenu.id ? "修 改" : "保 存" }}
            </el-button>
            <el-button type="info" plain @click="handleReset">重 置</el-button>
          </div>
        </div>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script setup>
import menuAside from "./aside.vue";
import menuForm from "./form.vue";
import menuAuth from "./auth.vue";
import {ref} from "vue";
import modal from "@/utils/modal";
import menuApi from "@/api/system/menu";
import treeUtil from "@/utils/tree";

const menuAsideRef = ref(null);
const menuFormRef = ref(null);
const asideMenu = ref(null);
const saving = ref(false);
const menuList = ref([]);

const getFormMenuList = () => {
  menuApi.lists.get({isExtend: true}).then(response => {
    response.data.list.forEach(menu => {
      if (menu.type === 'BUTTON' || menu.type === 'LINK' || menu.type === 'IFRAME') {
        menu.disabled = true;
      }
    });
    menuList.value = [...[{id: '0', code: 'Max', name: '顶级菜单'}], ...treeUtil.buildTree(response.data.list)];
  });
}

const handleNodeClick = (data) => {
  asideMenu.value = null;
  asideMenu.value = data;
}

const handleAddClick = (data) => {
  getFormMenuList();
  if (data) {
    asideMenu.value = {
      code: null,
      name: null,
      parentId: data.id,
      path: null,
      component: null,
      icon: null,
      type: null,
      category: data.category === 'DIRECTORY' ? 'MENU' : data.category === 'MENU' ? 'BUTTON' : null,
      sort: null,
      remark: null,
      hidden: null,
      enabled: null,
      sysPowerVoList: [],
    };
  } else {
    asideMenu.value = {
      code: null,
      name: null,
      parentId: null,
      path: null,
      component: null,
      icon: null,
      type: null,
      category: null,
      sort: null,
      remark: null,
      hidden: null,
      enabled: null,
      sysPowerVoList: [],
    };
  }
}

const handleDeleteClick = (idList) => {
  modal.confirm(`确定删除选中的 ${idList.length} 项吗？`).then(() => {
    menuApi.del.delete(idList).then(response => {
      if (response.status) {
        modal.successMessage(response.message);
        menuAsideRef.value.getMenuList();
        getFormMenuList();
        handleReset();
      } else {
        modal.errorMessage(response.message);
      }
    });
  }).catch(() => {
    modal.infoMessage("用户取消操作");
  })
}

const handleSubmit = () => {
  saving.value = true;
  const formRef = menuFormRef.value.getFormRef();
  formRef.validate(valid => {
    if (valid) {
      if (asideMenu.value.id) {
        // 修改
        asideMenu.value.sysPowerDtoList = asideMenu.value.sysPowerVoList ? asideMenu.value.sysPowerVoList : [];
        for (let i = 0; i < asideMenu.value.sysPowerDtoList.length; i++) {
          const menuPower = asideMenu.value.sysPowerDtoList[i];
          menuPower.menuId = asideMenu.value.id;
          if (!menuPower.action) {
            modal.errorMessage("请求地址不能为空");
            saving.value = false;
            return;
          }
          if (!menuPower.code) {
            modal.errorMessage("权限标识不能为空");
            saving.value = false;
            return;
          }
        }
        menuApi.edit.put(asideMenu.value).then(response => {
          modal.message(response.message, {type: response.status ? 'success' : 'error'})
          saving.value = false;
          if (response.status) {
            asideMenu.value = response.data;
            menuAsideRef.value.getMenuList();
            getFormMenuList();
            menuAsideRef.value.setNodeChecked(asideMenu.value.id);
          }
        })
      } else {
        // 新增
        asideMenu.value.sysPowerDtoList = asideMenu.value.sysPowerVoList ? asideMenu.value.sysPowerVoList : [];
        for (let i = 0; i < asideMenu.value.sysPowerDtoList.length; i++) {
          const menuPower = asideMenu.value.sysPowerDtoList[i];
          if (!menuPower.action) {
            modal.errorMessage("请求地址不能为空");
            saving.value = false;
            return;
          }
          if (!menuPower.code) {
            modal.errorMessage("权限标识不能为空");
            saving.value = false;
            return;
          }
        }
        menuApi.add.post(asideMenu.value).then(response => {
          modal.message(response.message, {type: response.status ? 'success' : 'error'})
          saving.value = false;
          if (response.status) {
            asideMenu.value = response.data;
            menuAsideRef.value.getMenuList();
            getFormMenuList();
            menuAsideRef.value.setNodeChecked(asideMenu.value.id);
          }
        })
      }
    } else {
      modal.warningMessage("校验未通过");
      saving.value = false;
    }
  });
}

const handleReset = () => {
  asideMenu.value = null;
  menuList.value = [];
}
</script>

<style scoped lang="scss">
h2 {
  font-size: 17px;
  color: #3c4a54;
  padding: 0 0 30px 0;
}

[data-theme="dark"] h2 {
  color: #fff;
}

.row_height {
  height: 100%;
}

.apiList {
  height: 100%;
  border-left: 1px solid var(--el-border-color-light);
}

[data-theme="dark"] .apiList {
  border-color: var(--el-border-color-light);
}
</style>
